<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>带按钮的图片横幅广告</title>
		<link rel="icon" href="img1/favicon.ico" />
		<style>
		*{margin: 0px;padding: 0px;}
		.clearfix:after{
		   display: table;
		   content: "";
		   clear: both;}
		   .fl{float: left;}
		   .box{width: 426px;margin: 0 auto;/*background-color: #1EC0FF;*/
		  margin-top: 40px;/*background-color: #1EC0FF;*/position: relative;}
		   .no li{list-style: none;display: inline-block;
		   width: 24px;height: 24px;margin-left: 6px;background-color:white;text-align: center;
		   border: 1px solid #666;font-size: 14px;line-height: 24px;box-sizing: border-box;
		  }
		  li a{text-decoration: none;color: black;}
		  a:hover{color: red;}
		  a:active{color: yellow;}
		   .no{position: absolute;left:270px;top:102px;}
		</style>
	</head>
	<body>
	   <div class="box">
		    <div class="img">
		        <img src="img1/adver-01.jpg"/>
		    </div>
		    <ul class="no clearfix">
		        <li class="fl"><a href="homework12-2.html">1</a></li>
		        <li class="fl">2</li>
		        <li class="fl">3</li>
		        <li class="fl">4</li>
		        <li class="fl">5</li>
		    </ul>
	   </div>
	</body>
</html>
